<template>
  <div>
    <!-- 栅格布局 -->
    <el-row :gutter="20" justify="space-between">
      <el-col :span="14">
        <!-- 搜索框 -->
        <el-input v-model="roles.searchId" placeholder="请输入要搜索的ID" clearable class="input">
          <template #prepend>ID</template>
          <template #append>
            <el-button icon="Search" @click="searchClick" class="searchBtn" />
          </template>
        </el-input>
        <!-- 搜索框 -->
      </el-col>
      <el-col :span="4">
        <el-row>
          <el-col>
            <!-- 添加按钮 -->
            <el-button type="primary" @click="roles.addDialog = true">添加角色</el-button>
            <!-- 添加按钮 -->
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 添加角色的 dialog 框 -->
    <el-dialog title="添加角色" v-model="roles.addDialog" width="50%">
      <!-- 内容主体区域 -->
      <el-form ref="addFormRef" :model="roles.addForm" :rules="addRules" label-position="top" status-icon>
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roles.addForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="roles.addForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="roles.addDialog = false">取 消</el-button>
          <el-button type="primary" @click="addRoles">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑角色的 dialog 框 -->
    <el-dialog title="编辑角色" v-model="roles.editDialog" width="50%">
      <!-- 内容主体区域 -->
      <el-form ref="editFormRef" :model="roles.editRole" :rules="editRules" label-position="top" status-icon>
        <el-form-item label="角色ID" prop="id">
          <el-input v-model="roles.editRole.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roles.editRole.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="roles.editRole.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="roles.editDialog = false">取 消</el-button>
          <el-button type="primary" @click="editRoles">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分配权限的 dialog 框 -->
    <el-dialog title="分配权限" v-model="roles.assignDialog" width="50%" @close="treeClear">
      <!-- tree 树形控件 -->
      <el-tree ref="treeRef" show-checkbox :data="roles.rightsList" :props="treeProps"
        :default-checked-keys="roles.defKeys" node-key="id" />
      <!-- 底部区域 -->
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="roles.assignDialog = false">取 消</el-button>
          <el-button type="primary" @click="assignRights">确 定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import useStore from '@/pinia/index.js';
const { roles } = useStore();
// 表单对象
const addFormRef = ref()
const editFormRef = ref()
const treeRef = ref()
// 表单验证规则
const addRules = reactive({
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ],
  roleDesc: [
    { required: true, message: '请输入角色描述', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ]
})
const editRules = reactive({
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ],
  roleDesc: [
    { required: true, message: '请输入角色描述', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ]
})
// 树形控件的配置项
const treeProps = reactive({
  label: 'authName',
  children: 'children',
})
// 添加角色
const addRoles = () => {
  // 表单验证
  addFormRef.value.validate(valid => {
    if (valid) {
      roles.REQUEST_addRoles()
    } else {
      return false;
    }
  });
}
// 编辑角色
const editRoles = () => {
  // 表单验证
  editFormRef.value.validate(valid => {
    if (valid) {
      roles.REQUEST_editRoles()
    } else {
      return false;
    }
  });
}
// 分配权限
const assignRights = () => {
  // 分配权限的时候，把所有选中的和半选中的权限id以字符串形式存到store中
  roles.rids = treeRef.value.getCheckedKeys() + ',' + treeRef.value.getHalfCheckedKeys()
  // 执行分配权限的请求
  roles.REQUEST_assignRights()
}
// 关闭分配权限框时清空数据
const treeClear = () => {
  roles.defKeys = []
}
// TODO:ID搜索
const searchClick = () => {
  console.log("点击搜索");
}


</script>

<style lang="less" scoped>
.dialog-footer {
  button:first-child {
    margin-right: 12px;
  }
}

.input {
  width: 100%;
}

.searchBtn {
  &:hover {
    color: black !important;
  }
}
</style>